第十五章 事件

JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻。 可以使用仅在事件发生时执行的监听器（也叫处理程序）订阅事件。在传统软件工程领域，这个模型叫 “观察者模式”，其能够做到页面行为（在 JavaScript 中定义）与页面展示（在 HTML 和 CSS 中定义）的 分离。

事件流

1、事件冒泡
事件定义从最为具体的元素开始触发，然后传播至没那么具体的元素

2、事件捕获
最不具体的元素节点应该最先受到事件，而最具体的元素因该最后收到事件

事件处理程序

• DOM0

  • 元素.on + 事件名 = 处理函数
  • 元素.on + 事件名 = null

• DOM2

  • -addEventListener
  • -removeEventListener

• IE

  • -attachEvent
  • -detachEvent

// 兼容写法
var EventUtil = { 
    addHandler: function(element, type, handler) { 
        if (element.addEventListener) { 
            element.addEventListener(type, handler, false); 
        } else if (element.attachEvent) { 
            element.attachEvent("on" + type, handler); 
        } else { 
            element["on" + type] = handler; } 
    }, 
    removeHandler: function(element, type, handler) { 
        if (element.removeEventListener) { 
            element.removeEventListener(type, handler, false); 
        } else if (element.detachEvent) { 
            element.detachEvent("on" + type, handler); 
        } else { 
            element["on" + type] = null; 
        } 
    },
    getEvent: function(event) { 
        return event ? event : window.event; }
    ,
    getTarget: function(event) { 
        return event.target || event.srcElement; 
    },
	stopPropagation: function(event) { 
        if (event.stopPropagation) { 
            event.stopPropagation(); 
        } else { 
            event.cancelBubble = true; 
        } 
    },
    preventDefault: function(event) { 
        if (event.preventDefault) { 
            event.preventDefault(); 
        } else { 
            event.returnValue = false; 
        } 
    },


};

DOM事件对象

属性	类型	说明
bubbles	布尔值	只读 表示事件是否冒泡
cancelable	布尔值	只读 表示是否可以取消事件的默认行为
currentTarget	元素	只读 当前事件处理程序所在的元素
defaultPrevented	布尔值	只读 true 表示已经调用
preventDefault()	方法	（DOM3 Events 中新增）阻止默认行为
detail	整数	只读 事件相关的其他信息
eventPhase	整数	只读 表示调用事件处理程序的阶段：1 代表捕获阶段，2 代表 到达目标，3 代表冒泡阶段
preventDefault()	函数	只读 用于取消事件的默认行为。只有 cancelable 为 true 才 可以调用这个方法
stopImmediatePropagation()	函数	只读 用于取消所有后续事件捕获或事件冒泡，并阻止调用任 何后续事件处理程序（DOM3 Events 中新增）
stopPropagation()	函数	只读 用于取消所有后续事件捕获或事件冒泡。只有 bubbles 为 true 才可以调用这个方法
target	元素	只读 事件目标
trusted	布尔值	只读 true表示事件是由浏览器生成的。false 表示事件是开 发者通过 JavaScript 创建的（DOM3 Events 中新增）
type	字符串	只读 被触发的事件类型
View	AbstractView	只读 与事件相关的抽象视图。等于事件所发生的 window 对象

IE DOM事件对象

​ IE中的 event 对象 储存在window 上

属性	类型	说明
cancelBubble	布尔值	读/写 默认为 false，设置为 true 可以取消冒泡（与 DOM 的 stopPropagation()方法相同）
returnValue	布尔值	读/写 默认为 true，设置为 false 可以取消事件默认行为 （与 DOM 的 preventDefault()方法相同）
srcElement	元素	只读 事件目标（与 DOM 的 target 属性相同） type 字符串 只读 触发的事件类型

事件类型

 用户界面事件（UIEvent）

涉及与 BOM 交互的通用浏览器事件。

load

在 window 上当页面加载完成后触发，在窗套（<frameset>）上当所有窗格（<frame>） 都加载完成后触发，在<img>元素上当图片加载完成后触发，在<object>元素上当相应对象加 载完成后触发。

注意 根据 DOM2 Events，load 事件应该在 document 而非 window 上触发。可是为了 向后兼容，所有浏览器都在 window 上实现了 load 事件。

unload

在 window 上当页面完全卸载后触发，在窗套上当所有窗格都卸载完成后触发，在\